<!DOCTYPE html>
<html lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta name="viewport"
		content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta name="format-detection" content="telephone=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/index.css">
	<title>首页</title>
	<script type="text/javascript" src="js/flexible.js"></script>
</head>

<body>
	<div class="content pb100 pt112 bgf" isscroll="true">
		<!-- xseach -->
		<div class="xseach flex-align">
			<a class="xseach-back iconfont iconleft" href=""></a>
			<div class="xseach-inp flex1 iconfont iconsousuo1 flex-align">
				<input id="search-val" type="text" placeholder="蛋仔派对">
			</div>
			<div class="xseach-btn">搜索</div>
		</div>
		<!-- 搜索历史 -->
		<div class="xseach-ss-box">
			<div class="xseach-ss flex-align">
				<div class="xseach-ssa flex1">搜索发现</div>
				<div class="xseach-del iconfont icondel1"></div>
			</div>
			<div class="xseach-su flex flex-wrap"> </div>
		</div>
		<!-- 搜索结果 -->
		<div class="xseach-list xhot-ul mcm0 pt20 ovn">
			<!--  -->
			<div class="dtbox"></div>
			<!--  -->
			<div class="dropload-down">
				<div class="dropload-load"><span class="loading"></span>加载中...</div>
			</div>
		</div>
		<!--  -->
		<!--  -->
	</div>
	<!-- xnav -->
	<div class="xnav flex">
		<a class="xnav-li on xnav-lia" href="index.html">首页</a>
		<a class="xnav-li xnav-lib" href="game.html">游戏</a>
		<a class="xnav-li xnav-lic" href="gameCircle.html">游圈</a>
		<a class="xnav-li xnav-lid" href="buy.html">交易</a>
		<a class="xnav-li xnav-lie" href="my.html">个人</a>
	</div>
	<!--  -->
	<script src="js/jquery.min.js"></script>
	<script src="js/swiper.min.js"></script>
	<script src="js/used.js"></script>
	<script>
		let seaVal = $('#search-val');
		let seaBox = $('.xhot-ul');
		let dtbox = $('.dtbox');
		let seaLs = $('.xseach-ss-box');
		let page = 1;
		//点击搜索
		$(document).on('click', '.xseach-btn', function () {
			searchFun()
		})
		//搜索历史 点击
		$(document).on('click', '.xseach-su span', function () {
			seaVal.val($(this).text());
			searchFun()
		})

		//渲染搜索历史
		let historyList = localStorage.getItem('historyList');
		if (historyList) {
			historyList = JSON.parse(historyList);
			let html = '';
			for (let i = 0; i < historyList.length; i++) {
				html += `<span>${historyList[i]}</span>`
			}
			$('.xseach-su').html(html);
		} else {
			historyList = [];
			seaLs.html('');
		}
		//清除历史
		$('.xseach-del').on('click', function () {
			localStorage.removeItem('historyList');
			seaLs.html('');
		})
		//搜索
		function searchFun() {
			let keywords = seaVal.val();
			let isHave = false;
			if (!keywords) {
				return toast.success('请输入搜索内容');
			}
			// 判断搜索历史是否有相同的
			for (let i = 0; i < historyList.length; i++) {
				if (historyList[i] == keywords) {
					isHave = true;
				}
			}
			if (!isHave) {
				historyList.push(keywords);
				if (historyList.length > 20) {
					historyList.pop();
				}
				localStorage.setItem('historyList', JSON.stringify(historyList));
			}
			searchFunAbc('new');
		}
		//搜索
		function searchFunAbc(type) {
			if (type == 'new') {
				page = 1;
				dtbox.html('');
			}
			seaLs.hide();
			seaBox.show();
			downFunLoad($('.content'));
		}
		//请求加载数据
		function downFunLoad(oa) {
			console.log('去加载吧')
			let params = { page: page };
			setTimeout(function () {
				//请求数据
				let list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
				let html = '';
				for (let i = 0; i < list.length; i++) {
					html += `<div class="xhot-li flex-align">
								<div class="xhot-lia"><img class="img100" src="images/img.png" alt=""></div>
								<div class="xhot-lib flex1">
									<div class="xhot-liba">
										<h4>自由之刃</h4>
										<span>散发迷人专属</span>
									</div>
									<div class="xhot-libb flex-align mt12">
										<span>设备:</span>
										<img src="images/icon1.png" alt="">
										<img src="images/icon2.png" alt="">
										<img src="images/icon3.png" alt="">
									</div>
									<div class="xhot-libc flex-align mt8">
										<img class="xhot-libc-a" src="images/icon4.png" alt="">
										<img class="xhot-libc-i" src="images/icon5.png" alt="">
										<span class="xhot-libc-p">申请解锁</span>
									</div>
								</div>
								<div class="tj-swcon-j flex-column">
									<div class="tj-swcon-ja flex-align">
										<img class="tj-swcon-jic" src="images/icon7.png"></img>
										<span class="ce97 fz24 ml10 bold">加速</span>
									</div>
									<div class="tj-swcon-ja flex-align mt10">
										<img class="tj-swcon-jic" src="images/icon6.png"></img>
										<span class="c13b fz24 ml10 bold">0.2折</span>
									</div>
								</div>
							</div>`
				}
				//写入数据
				dtbox.append(html);
				if (list.length == 0 && page == 1) {
					//无数据
					downFunNo(oa)
				} else if (list.length == 10) {
					page++;
					//正常加载
					downFunYes(oa);
				} else if (list.length < 10) {
					//没有更多
					downFunAll(oa);
				}
			}, 1000)
		}
		//下拉加载
		downFun($('.content'))
	</script>
</body>

</html>